<template>
  <div>
    <v-header/>
    <div class="content">
      <div class="top">
        <span>您的企业营销，从神奇的“霸屏”短信开始</span>
      </div>
      <div class="telegram">
        <div class="tele-con">
          <h4 class="tele-title">什么是闪信</h4>
          <p class="tele-desc">通过闪信服务向用户发送短信，短信内容直接以“弹窗霸屏”的形式展现在客户手机上，客户必须阅读后才可关闭。</p>
          <ul class="tele-list">
            <li v-for="(item,index) in items" :key="index">
              <div class="t-left"><img :src=item.imgUrl :alt=item.title></div>
              <div class="t-right">
                <h5>{{item.title}}</h5>
                <p>{{item.desc}}</p>
              </div>
            </li>
          </ul>
        </div>
      </div>
      <div class="future">
        <div class="ft-left"><img src="./images/letter1.png" ></div>
        <div class="ft-right">
          <h4>未使用闪信服务</h4>
          <p>用户收到的短信只是普通送达至信息收件箱可能还没被阅读已经被删除</p>
        </div>
      </div>
      <div class="employ">
        <div class="em-left">
          <h4>使用闪信服务后</h4>
          <p>使用闪信服务后短信会一直霸屏显示在手机主页</p>
        </div>
        <div class="em-right"><img src="./images/letter2.png" ></div>
      </div>
      <div class="flow">
        <div class="fl-content">
          <div class="fl-left">
            <div class="fl-title">接入流程</div>
            <div class="fl-nav">
              <div @click="cur=0" :class="['nav-item',{active:cur==0}]"><i>1</i><span>注册账户</span></div>
              <div @click="cur=1" :class="['nav-item',{active:cur==1}]"><i>2</i><span>后台发送测试</span></div>
              <div @click="cur=2" :class="['nav-item',{active:cur==2}]"><i>3</i><span>在线充值购买</span></div>
              <div @click="cur=3" :class="['nav-item',{active:cur==3}]"><i>4</i><span>添加闪信模版</span></div>
              <div @click="cur=4" :class="['nav-item',{active:cur==4}]"><i class="last">5</i><span>上线使用</span></div>
            </div>
          </div>
          <div class="fl-right">
            <div class="wrap" v-show="cur==0">
              <img src="./images/process1.png" alt="">
              <p>注册账户</p>
              <p>现在注册，即可获得免费测试机会</p>
              <p>可用于后台批量测试发送或API接口对接测试</p>
              <div class="wrap-btn">
                <el-button type="primary" size="small" @click="login">登录</el-button>
                <el-button type="success" size="small" @click="login">注册</el-button>
              </div>
            </div>
            <div class="wrap" v-show="cur==1">
              <img src="./images/process2.png" alt="">
              <p>注册/登录后，进入专业版后台</p>
              <p>输入接收方号码，内容等，点击发送进行测试</p>
              <p>查看闪信效果</p>
              <div class="wrap-btn">
                <el-button type="primary" size="small" @click="login">登录</el-button>
                <el-button type="success" size="small" @click="login">注册</el-button>
              </div>
            </div>
            <div class="wrap" v-show="cur==2">
              <img src="./images/process3.png" alt="">
              <p>服务购买</p>
              <p>提供丰富的套餐选择，满足不同的发送量需求</p>
              <p>支持微信\支付宝在线充值，灵活方便，余额即时到账</p>
              <div class="wrap-btn">
                <el-button type="primary" size="small" @click="login">登录</el-button>
                <el-button type="success" size="small" @click="login">注册</el-button>
              </div>
            </div>
            <div class="wrap" v-show="cur==3">
              <img src="./images/process4.png" alt="">
              <p>添加闪信模板</p>
              <p>所有提交发送的闪信都会先人工审核在发送，如需免审发送闪信</p>
              <p>可联系售后客服添加闪信模板，审核通过后</p>
              <p>通过模板发送闪信即可免审</p>
            </div>
            <div class="wrap" v-show="cur==4">
              <img src="./images/process5.png" alt="">
              <p>完成以上步骤后，就可以在管理后台操作发送闪信</p>
              <p>您也可以通过API接口调用的方式发送闪信</p>
              <p>同时我们提供标准的HTTP发送接口，只需少量开发即可轻松对接</p>
              <p>支持各类开发语言（PHP\JAVA\C#等）</p>
            </div>

          </div>
        </div>
      </div>
      <div class="price-table">
        <div class="site-width">
          <div class="title">
              <h3>短信购买支持在线支付，余额即时到账，使用方便快捷</h3>
          </div>
          <ul class="price-list">
            <li>
                <div class="item">
                    <p class="name">5000条闪信包</p>
                    <p class="price">￥600</p>
                    <p class="des">
                        包含5000条闪信 <br>
                        ￥0.12/条 <br>
                        永久使用
                    </p>
                    <p class="sub">
                        <a href="#/login" title="立即购买5000条闪信包">立即购买</a>
                    </p>
                </div>
            </li>
            <li>
                <div class="item">
                    <p class="name">10000条闪信包</p>
                    <p class="price">￥1100</p>
                    <p class="des">
                        包含10,000条闪信 <br>
                        ￥0.11/条 <br>
                        永久使用
                    </p>
                    <p class="sub">
                        <a href="#/login"  title="立即购买1万条闪信包">立即购买</a>
                    </p>
                </div>
            </li>
            <li>
                <div class="item">
                    <p class="name">30000条短信包</p>
                    <p class="price">￥3000</p>
                    <p class="des">
                        包含30,000条闪信 <br>
                        ￥0.1/条 <br>
                        永久使用
                    </p>
                    <p class="sub">
                        <a href="#/login"  title="立即购买3万条闪信包">立即购买</a>
                    </p>
                </div>
            </li>
            <li>
                <div class="item">
                    <p class="name">10万条短信包</p>
                    <p class="price">￥9000</p>
                    <p class="des">
                        包含100,000条短信 <br>
                        ￥0.09/条 <br>
                        永久使用
                    </p>
                    <p class="sub">
                        <a href="#/login" title="立即购买10万条闪信包">立即购买</a>
                    </p>
                </div>
            </li>
          </ul>
          <div class="price-table-etc">
              <i class="el-icon-success"></i>
              如您的每月发送量超过50万条或有更大数量的套餐购买需求，请联系我们尊享更多VIP特权！
          </div>
        </div>
      </div>
    </div>
    <v-contact/>
    <v-footer/>
  </div>
</template>
<script>

export default {
  data () {
    return {
      cur:0,
      tabPosition: 'left',
      items:[
        {imgUrl:require('./images/enhance.png'),title:'提高呼叫接通率',desc:'客户接听前即可知晓来电人员身份，能够有效减少用户不信任未知电话而挂机的情况。'},
        {imgUrl:require('./images/remind.png'),title:'未接来电智能提示',desc:'用户来电通过弹窗信息告知来电人员身份，能够提高用户漏接来电的回电率，提高下次来电的接通率'},
        {imgUrl:require('./images/inform.png'),title:'通知类短信到达率100%',desc:'通过来电秀（短信）服务发送的短信内容直接以“霸屏”弹窗的形式展现在客户手机上，客户必须阅读后才可关闭弹窗。'},
        {imgUrl:require('./images/unite.png'),title:'三大运营商联合出品',desc:'中国电信、移动、联通三网通用。点对点发送，具有高稳定性、高可靠性。'},
      ],
    }
    
  },
  methods: {
    login(){
      this.$router.push({
        path:'/login'
      })
    }
  }
}
</script>
<style scoped>
.content{
  min-height:2600px;
  background: #fff; 
}
.top{
  width: 100%;
  height: 400px;
  background: url('./images/callshowhome.jpg') center/cover no-repeat
}
.top span{
  line-height: 400px;
  font-size: 24px;
  font-weight: 600;
  color: #fff
}
.telegram{
  width: 100%;
  height: 500px;
  box-sizing: content-box
}
.tele-con{
  width: 1100px;
  margin: 0 auto;
}
.tele-con .tele-title{
  font-size: 24px;
  color: #3E4D60;
  padding: 40px 0 30px;
  margin: 0
}
.tele-con .tele-desc{
  font-size: 16px;
  color: #333333;
  line-height: 25px;
  text-align: left;
}
.tele-list{
  width: 100%;
  list-style: none;
  margin: 0;
  display: table;
  padding: 0;
}
.tele-list li{
  width: 40%;
  float: left;
  margin-top: 40px;
}
.tele-list li:nth-child(2n+1){
  float: right;
}
.tele-list li .t-left{
  width: 40px;
  float: left;
  height: 100px;
  margin-right: 20px;
}
.tele-list li .t-left img{
  display: inline-block;
  
  vertical-align: middle;
}
.tele-list li .t-right{
  text-align: left
}
.tele-list li .t-right h5{
  font-weight: 600;
  margin: 0;
  padding: 0;
  font-size: 20px;
  color: #3DD18F;
}
.tele-list li .t-right p{
  font-size: 14px;
  color: #333333;
  margin-top: 15px;
  line-height: 25px;
}
.future{
  width: 100%;
  height: 480px;
  background: #3E4750;
}
.future .ft-left{
  width: 40%;
  float: left;
  
}
.future .ft-left img{
  width: 300px;
  height: 543px;
  margin-top: 80px;
  float: right;
}
.future .ft-right{
  width: 55%;
  text-align: left;
  float: right;
  color: #fff;
  margin-top:200px
}
.future .ft-right h4{
  font-weight: 600;
  font-size: 32px;
  color: #3DD18F;
  margin: 10px 0;
}
.future .ft-right p{
  color: #fff;
  font-size: 18px;
}
.employ{
  width: 100%;
  margin-top: 150px;
  height: 620px;
}
.employ .em-left{
  float: left;
  width: 55%;
  text-align: right;
  margin-top:200px;
  
}
.employ .em-left h4{
  font-weight: 600;
  font-size: 32px;
  color: #3DD18F;
  margin: 10px 0;
}
.employ .em-left p{
  width: 60%;
  float: right;
  text-align: right;
  color: #333;
  font-size: 16px;
}
.employ .em-right{
  width: 40%;
  float: right;
}
.employ .em-right img{
  width: 300px;
  height: 543px;
  float: left;
}
.flow{
  width: 100%;
  height: 386px;
  background: #FBFBFB;
}
.fl-content{
  width: 1000px;
  margin: 0 auto;
  display: table;
}
.fl-content .fl-left{
  width: 271px;
  height: 386px;
  background: #F1F1F1;
  float: left;
  margin-right: 120px
}
.fl-content .fl-left .fl-title{
  margin: 42px auto 28px;
  font-size: 18px;
  color: #666
}
.fl-nav{
  width: 100%;
  box-sizing: content-box;
  
}
.nav-item{
  height: 30px;
  line-height: 30px;
  border-radius: 21px;
  width: 164px;
  margin: 25px auto 0;
  cursor: pointer;
}
.nav-item i{
  display: block;
  float: left;
  font-style: normal;
  color: #3DD18F;
  font-size: 14px;
  position: relative;
  width: 25px;
  height: 25px;
  line-height: 25px;
  box-sizing: border-box;
  border: 1px solid #3DD18F;
  border-radius: 50%;
  margin-top: 2.5px;
  margin-left: 5px;
}
.nav-item i::after{
  content: "";
  height: 30px;
  width: 1px;
  background: #3DD18F;
  position: absolute;
  bottom: -31px;
  left: 12px;
}
.nav-item i.last::after{
  content: "";
  height: 0
}
.nav-item span{
  display: inline-block;
  font-size: 14px;
  color: #666;
}
.nav-item.active{
  background: #3DD18F;
}
.nav-item.active i{
  color: #fff;
  border: 1px solid #fff;
}
.nav-item.active span{
  color: #fff;
}
.fl-content .fl-right{
  width: 45%;
  float: left;
  height: 386px;
}
.wrap img{
  display: inline-block;
  width: 181px;
  height: 129px;
  margin-top: 50px;
}
.price-table{
  width: 100%;
  padding: 60px 0 40px;
}
.price-table .title{
  text-align: center;
  margin-bottom: 40px;
  text-align: center
}
.price-table .title h3{
  font-weight: 600;
  font-size: 18px;
  margin: 0;
  padding: 0;
  
}
.site-width{
  width: 1100px;
  margin: 0 auto;
  display: table;
}
.price-list{
  padding: 0;
  display: table;
  width: 100%;
  list-style: none;
  text-align: center;
  margin: 0 auto;
}
.price-list li{
  width: 20%;
  height: auto;
  display: inline-block;
  cursor: pointer;
}
.price-list li .item:hover{
    background: #3e4d60;
    color: #FFF;
    border: 1px solid #3e4d60;
}
.price-list li .item{
  border: 1px solid #E9E9E9;
  margin: 5px;
  padding: 15px;
  border-radius: 3px;
}
.price-list li .item .name{
  font-size: 20px;
  font-weight: 700;
  padding: 15px 0;

}
.price-list li .item .price{
  margin: 0;
  padding: 0;
  font-size: 24px;

  line-height: 1.6
}
.price-list li .item .desc{
  padding: 20px 0 30px;
  font-size: 14px;
  color: #999;
}
.price-list li .item .sub a{
  display: block;
  text-decoration: none;
  background-color: #3dd18f;
  border:1px solid #29af73;
  color: #fff;
  padding: 10px 20px;
  border-radius: 20px;
}
.price-table-etc{
  text-align: center;
  padding: 20px 0;
  color: #3E4D60;
}
</style>
  